<template>
  <div>
    <div class="news-detail">
      <div class="news-detail-title">{{ noticeInfo.title }}</div>
      <div class="htmls" v-html="noticeInfo.content"></div>
    </div>
  </div>
</template>

<script>
import { getNoticeInfo } from "@/services/index";
export default {
  data() {
    return {
      noticeInfo: {},
    };
  },
  async onLoad({ id }) {
    let res = await getNoticeInfo(id);
    this.noticeInfo = res;
    this.noticeInfo.content = this.noticeInfo.content
      .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, "<p")
      .replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, "<img$1")
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, "<img$1")
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, "<img$1")
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, "<img$1")
      .replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="width: 100%;" $1');
  },
};
</script>

<style scoped>
.news-detail {
  padding: 20rpx;
}
.news-detail-title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 50rpx;
  padding: 20rpx;
}
</style>